<template>
  <div style="
      background-color: #1478f6;
      width: 128px;
      margin-right: 8px;
    " :style="{
      borderRadius:
        sidebar.opened
          ? '16px'
          : '16px 16px 0 0',
    }" @click="toggleClick">
    <div style="
        height: 100%;
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      ">
      <img src="@/assets/logo/tranLogo.png" alt="" style="width: 65%; height: 55px" />
      <!--      <div class="hanmTitle">-->
      <!--        <span>用安数智中台</span>-->
      <!--      </div>-->
    </div>
    <!-- <img src="" alt="" style="width: 40px;height: 40px;margin: 16px;"> -->
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  export default {
    name: "Hamburger",
    computed: {
      ...mapGetters(["sidebar"]),
    },
    props: {
      isActive: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      toggleClick() {
        this.$emit("toggleClick");
      },
    },
  };

</script>

<style scoped>
  .hamburger {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    color: #fff;
  }

  .hamburger.is-active {
    transform: rotate(180deg);
  }

  .hanmTitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 8px;
  }

  .hanmTitle span {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
  }

</style>
